<template>
  <view class="feedback-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="意见反馈" :show-back="true"></nav-bar>
    
    <!-- 反馈表单 -->
    <view class="feedback-form">
      <!-- 反馈类型 -->
      <view class="form-title">反馈类型</view>
      <view class="type-selection">
        <view 
          v-for="(type, index) in feedbackTypes"
          :key="index"
          class="type-item"
          :class="{ active: formData.typeIndex === index }"
          @click="selectType(index)"
        >
          {{ type.name }}
        </view>
      </view>
      
      <!-- 反馈内容 -->
      <view class="form-title">反馈内容</view>
      <view class="form-textarea">
        <textarea 
          class="feedback-textarea"
          v-model="formData.content"
          placeholder="请描述您遇到的问题或建议，我们会尽快处理"
          :maxlength="500"
          auto-height
        ></textarea>
        <view class="textarea-counter">{{ formData.content.length }}/500</view>
      </view>
      
      <!-- 上传图片 -->
      <view class="form-title">上传截图（选填）</view>
      <view class="upload-area">
        <view 
          class="image-item" 
          v-for="(image, index) in formData.images" 
          :key="index"
        >
          <image :src="image" mode="aspectFill" @click="previewImage(index)"></image>
          <view class="delete-icon" @click.stop="deleteImage(index)">
            <tn-icon name="close" size="32" color="#FFFFFF"></tn-icon>
          </view>
        </view>
        
        <view class="upload-button" @click="chooseImage" v-if="formData.images.length < 3">
          <tn-icon name="add" size="40" color="#CCCCCC"></tn-icon>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="form-title">联系方式（选填）</view>
      <input 
        class="form-input" 
        v-model="formData.contact"
        placeholder="留下您的手机号或微信，方便我们联系您"
        type="text"
      />
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :disabled="!isFormValid"
        :class="{ disabled: !isFormValid }"
        @click="submitFeedback"
      >
        提交反馈
      </button>
      
      <!-- 反馈说明 -->
      <view class="feedback-tips">
        <text>感谢您的反馈，我们会认真对待每一条意见</text>
        <text>如有紧急问题，请联系微信客服：stellarmeet</text>
      </view>
    </view>
    
    <!-- 历史反馈记录 -->
    <view class="history-section" v-if="feedbackHistory.length > 0">
      <view class="history-title">
        <text>历史反馈</text>
        <text class="view-all" @click="viewAllHistory">查看全部</text>
      </view>
      
      <view class="history-list">
        <view
          v-for="item in feedbackHistory.slice(0, 2)"
          :key="item.id"
          class="history-item"
          @click="viewFeedbackDetail(item)"
        >
          <view class="history-header">
            <text class="history-type">{{ feedbackTypes[item.typeIndex]?.name }}</text>
            <text class="history-status" :class="item.status">{{ getStatusText(item.status) }}</text>
          </view>
          <view class="history-content">{{ item.content }}</view>
          <view class="history-time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 反馈类型
const feedbackTypes = [
  { name: '功能异常', value: 'bug' },
  { name: '产品建议', value: 'suggestion' },
  { name: '体验问题', value: 'experience' },
  { name: '违规举报', value: 'report' },
  { name: '其他问题', value: 'other' }
];

// 表单数据
const formData = ref({
  typeIndex: 0,
  content: '',
  images: [],
  contact: ''
});

// 表单验证
const isFormValid = computed(() => {
  return formData.value.content.trim().length >= 10;
});

// 选择反馈类型
const selectType = (index) => {
  formData.value.typeIndex = index;
};

// 选择图片
const chooseImage = () => {
  if (formData.value.images.length >= 3) {
    uni.showToast({
      title: '最多上传3张图片',
      icon: 'none'
    });
    return;
  }
  
  uni.chooseImage({
    count: 3 - formData.value.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      formData.value.images = [...formData.value.images, ...res.tempFilePaths];
    }
  });
};

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: formData.value.images
  });
};

// 删除图片
const deleteImage = (index) => {
  formData.value.images.splice(index, 1);
};

// 提交反馈
const submitFeedback = () => {
  if (!isFormValid.value) {
    uni.showToast({
      title: '请输入至少10个字的反馈内容',
      icon: 'none'
    });
    return;
  }
  
  // 实际项目中应该调用API提交反馈
  console.log('提交反馈:', {
    type: feedbackTypes[formData.value.typeIndex].value,
    content: formData.value.content,
    images: formData.value.images,
    contact: formData.value.contact
  });
  
  // 模拟提交成功
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    
    uni.showToast({
      title: '反馈提交成功',
      icon: 'success'
    });
    
    // 表单重置
    formData.value = {
      typeIndex: 0,
      content: '',
      images: [],
      contact: ''
    };
    
    // 模拟添加到历史记录
    const newFeedback = {
      id: Date.now(),
      typeIndex: 0,
      content: '提交的反馈内容已成功记录',
      status: 'pending',
      createTime: formatDate(new Date())
    };
    
    feedbackHistory.value.unshift(newFeedback);
  }, 1500);
};

// 历史反馈记录
const feedbackHistory = ref([
  {
    id: 1,
    typeIndex: 0,
    content: '闲置交易页面无法正常显示图片，请修复',
    status: 'replied',
    createTime: '2023-05-10',
    reply: '感谢您的反馈，问题已修复，请更新至最新版本。'
  },
  {
    id: 2,
    typeIndex: 1,
    content: '建议增加夜间模式功能，使用体验会更好',
    status: 'pending',
    createTime: '2023-05-05'
  }
]);

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '处理中',
    'processing': '跟进中',
    'replied': '已回复',
    'closed': '已关闭'
  };
  return statusMap[status] || status;
};

// 查看所有历史记录
const viewAllHistory = () => {
  uni.navigateTo({
    url: '/pages/user/feedback-history'
  });
};

// 查看反馈详情
const viewFeedbackDetail = (item) => {
  uni.navigateTo({
    url: `/pages/user/feedback-detail?id=${item.id}`
  });
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
};
</script>

<style lang="scss" scoped>
.feedback-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
}

.feedback-form {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 20rpx 0;
  color: #333333;
}

.type-selection {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
  
  .type-item {
    padding: 16rpx 24rpx;
    background-color: #f5f5f5;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #666666;
    
    &.active {
      background-color: rgba(50, 197, 255, 0.1);
      color: #32C5FF;
      font-weight: bold;
    }
  }
}

.form-textarea {
  position: relative;
  margin-bottom: 30rpx;
  
  .feedback-textarea {
    width: 100%;
    min-height: 240rpx;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333333;
    box-sizing: border-box;
  }
  
  .textarea-counter {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    font-size: 24rpx;
    color: #999999;
  }
}

.upload-area {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
  
  .image-item, .upload-button {
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }
  
  .image-item {
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .delete-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .upload-button {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #cccccc;
  }
}

.form-input {
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 20rpx;
  margin-bottom: 40rpx;
  font-size: 28rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #32C5FF, #BA68C8);
  color: #ffffff;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  
  &::after {
    border: none;
  }
  
  &.disabled {
    opacity: 0.6;
  }
}

.feedback-tips {
  padding: 10rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  text {
    font-size: 24rpx;
    color: #999999;
    line-height: 1.6;
  }
}

.history-section {
  background-color: #ffffff;
  padding: 30rpx;
}

.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  text {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .view-all {
    font-size: 26rpx;
    color: #32C5FF;
  }
}

.history-list {
  .history-item {
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
    
    .history-type {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }
    
    .history-status {
      font-size: 24rpx;
      
      &.pending {
        color: #FF9800;
      }
      
      &.processing {
        color: #2196F3;
      }
      
      &.replied {
        color: #4CAF50;
      }
      
      &.closed {
        color: #9E9E9E;
      }
    }
  }
  
  .history-content {
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 10rpx;
    line-height: 1.5;
  }
  
  .history-time {
    font-size: 24rpx;
    color: #999999;
    text-align: right;
  }
}
</style> 